<template>
  <div class="app-container">
    <el-row :gutter="20">
      <el-col>
        <el-form ref="dataFrom" :model="dataFrom" size="small" :inline="true" label-width="68px">
          <el-form-item label="手机号">
            <el-input type="number" oninput="if(value>11){value=value.substring(0, 11)}" v-model="dataFrom.phone"
              placeholder="请输入手机号" />
          </el-form-item>
          <el-form-item label="角色">
            <el-select v-model="dataFrom.roleKey" placeholder="选择角色">
              <el-option v-for="(item ,index) in roleKeyList" :key="index" :label="item.label"
                :value="item.value"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="选择时间">
            <el-date-picker v-model="tiemValue" type="daterange" value-format="yyyy-MM-dd" range-separator="至"
              start-placeholder="开始日期" end-placeholder="结束日期" :default-time="['00:00:00', '23:59:59']">
            </el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmitsear" icon="el-icon-search" size="mini">查询</el-button>
            <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
          </el-form-item>
        </el-form>
        <el-row :gutter="10" class="mb8">
          <el-col :span="1.5">
            <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="add">新增</el-button>
          </el-col>
        </el-row>
        <el-table v-loading="loading" :data="tableData" ref="tableRef" border style="width: 100%" class="mb20">
          <el-table-column prop="id" label="ID" align="center">
          </el-table-column>
          <el-table-column prop="manageCapsuleInfoTitle" label="负责基地" align="center">
            <template slot-scope="scope">
             <div class="list" v-for="(item ,index) in scope.row.manageCapsuleInfoTitle" :key="index">
                {{item}}
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="manageCapsuleInfoId" label="负责基地ID" align="center">
          </el-table-column>
          <el-table-column prop="userName" label="姓名" align="center">
          </el-table-column>
          <el-table-column prop="sex_" label="性别" align="center">
          </el-table-column>
          <el-table-column prop="phone" label="手机号" align="center">
          </el-table-column>
          <el-table-column prop="idCard" label="身份证号" align="center">
          </el-table-column>
          <el-table-column prop="roleKey" label="角色" align="center">
          </el-table-column>
          <el-table-column prop="lastLoginTime" label="最后登录时间" align="center">
          </el-table-column>
          <el-table-column label="操作" width="210" align="center">
            <template slot-scope="scope">
              <el-button size="mini" type="text" icon="el-icon-document"
                @click.stop="setUserPass(scope.row.id , types = 'detail')">重置密码</el-button>
              <el-button size="mini" type="text" icon="el-icon-edit"
                @click.stop="userDetail(scope.row , types = 'edit')">编辑</el-button>
              <el-button size="mini" type="text" icon="el-icon-delete"
                @click="handleDelete(scope.row.id)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination background align='right' @size-change="handleSizeChange" @current-change="handleCurrentChange"
          :current-page="dataFrom.pageNum" :page-size="dataFrom.pageSize"
          layout="prev, pager, next" :total="total">
        </el-pagination>
      </el-col>
    </el-row>
    <!-- 新增和修改 -->
    <el-dialog :title="types == 'add'?'新增角色':(types == 'edit'?'编辑角色':'用户')" :visible.sync="userVisibles" width="44%"
      :before-close="handleClose">
      <el-form ref="fromUsers" :model="fromUsers" label-width="120px" :rules="rules">
        <el-row>
          <el-col :span="11">
            <el-form-item label="所属基地" prop="manageCapsuleInfoId">
              <el-select multiple collapse-tags v-model="fromUsers.manageCapsuleInfoId" placeholder="所属基地">
                <el-option v-for="(item ,index) in spaceList" :key="index" :label="item.label"
                  :value="item.value"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item label="姓名" prop="userName">
              <el-input v-model="fromUsers.userName" placeholder="请输入姓名" />
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item label="性别" prop="sex">
              <el-select v-model="fromUsers.sex" placeholder="选择性别">
                <el-option v-for="(item ,index) in sexList" :key="index" :label="item.label"
                  :value="item.value"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item label="昵称" prop="nickName">
              <el-input v-model="fromUsers.nickName" placeholder="请输入昵称" />
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item label="手机号" prop="phone">
              <el-input maxlength="11" type="number" oninput="if(value>11){value=value.substring(0, 11)}" v-model="fromUsers.phone"
                placeholder="请输入手机号" />
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item maxLength="18" label="身份证号" prop="idCard">
              <el-input v-model="fromUsers.idCard" oninput="if(value>18){value=value.substring(0, 18)}"
                placeholder="请输入身份证号" />
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item label="登录密码" prop="password">
              <el-input type="number" oninput="if(value>6){value=value.substring(0, 6)}" v-model="fromUsers.password"
                placeholder="设置密码" />
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item label="角色分配" prop="roleKey">
              <el-select v-model="fromUsers.roleKey" placeholder="选择角色">
                <el-option v-for="(item ,index) in roleKeyList" :key="index" :label="item.label"
                  :value="item.value"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <span slot="footer" class="dialog-footer" v-if="types == 'add' || types == 'edit'">
        <el-button @click="userVisibles = false">取 消</el-button>
        <el-button type="primary" @click="onSubmit('fromUsers')">确 定</el-button>
      </span>

    </el-dialog>
  </div>
</template>

<script>
  import {
    getList,
    userAdd,
    deleteUser,
    setPass,
    editUser
  } from '@/api/userB/userB'
  import {
    capsuleInfoSelects
  } from '@/api/space/spaceRoom'
  export default {
    data() {
      return {
        loading: true,
        types: 'add',
        total: 0,
        dataFrom: {
          "createBeginTime": "",
          "createEndTime": "",
          "pageNum": 1,
          "pageSize": 10,
          "phone": "",
          "roleKey": ""
        },
        tableData: [],
        userVisibles: false,
        fromUsers: {
          "avator": "",
          "idCard": "",
          // "lastLoginTime": "",
          "manageCapsuleInfoId": '',
          "nickName": "",
          "password": "",
          "phone": "",
          "roleKey": "",
          "sex": '',
          "userName": ""
        },
        sexList: [{
            label: '男',
            value: 0
          },
          {
            label: '女',
            value: 1
          },
          {
            label: '隐藏',
            value: 2
          }
        ],
        roleKeyList: [
          {
            label: '管理员',
            value: 'manage'
          },
          {
            label: '管家',
            value: 'housekeep'
          },
          {
            label: '保洁',
            value: 'clean'
          },
          {
            label: '维修',
            value: 'repair'
          }
        ],
        roleKey: '',
        sex: '',
        manageCapsuleInfoId: '',
        spaceList: [],
        tiemValue: '',
        rules: {
          manageCapsuleInfoId: [{
            required: true,
            message: '请选择太空舱基地',
            trigger: 'blur'
          }],
          userName: [{
            required: true,
            message: '请输入用户名',
            trigger: 'blur'
          }],
          phone: [{
            pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
            message: "请输入正确的手机号码",
            required: true,
            message: '请输入手机号',
            trigger: 'blur'
          }],
          idCard: [{
            required: true,
            message: '请输入身份证号',
            trigger: 'blur'
          }],
          password: [{
            required: true,
            message: '请输登录密码',
            trigger: 'blur'
          }],
          roleKey: [{
            required: true,
            message: '请输选择用户角色',
            trigger: 'blur'
          }]
        }
      }
    },
    created() {
      this.getList()
      capsuleInfoSelects().then(res => {
        this.spaceList = res.data
      })
    },
    methods: {
      getList() {
        getList(this.dataFrom).then(res => {
          this.tableData = res.data.rows
          this.tableData.map(item => {
            if (item.roleKey == 'manage') {
              this.$set(item, 'roleKey', '管理员')
            } else if (item.roleKey == 'manage') {
              this.$set(item, 'clean', '保洁员')
            } else {
              this.$set(item, 'roleKey', '维修员')
            }
            if (item.sex == 0) {
              this.$set(item, 'sex_', '男')
            } else if (item.sex == '1') {
              this.$set(item, 'sex_', '女')
            } else {
              this.$set(item, 'sex_', '未知')
            }
            this.$set(item , 'manageCapsuleInfoTitle' , item.manageCapsuleInfoTitle.split(','))
          })
          console.log(this.tableData)
          this.total = res.data.total
          this.loading = false
        })
      },
      handleSizeChange(val) {
        this.dataFrom.pageNum = val
        this.getList()
      },
      handleCurrentChange(val) {
        this.dataFrom.pageNum = val
        this.getList()
      },
      onSubmit(fromUsers) {
        this.$refs[fromUsers].validate((valid) => {
          if (valid) {
            this.fromUsers.manageCapsuleInfoId = this.fromUsers.manageCapsuleInfoId.join(',')
            if (this.types == 'edit') {
              editUser(this.fromUsers).then(res => {
                this.$message({
                  message: '提交成功！',
                  type: 'success'
                })
                this.fromUsers = {}
                this.userVisibles = false
                this.getList()
              })
            } else {
              userAdd(this.fromUsers).then(res => {
                this.$message({
                  message: '提交成功！',
                  type: 'success'
                })
                this.fromUsers = {}
                this.userVisibles = false
                this.getList()
              })
            }

          }
        })
      },
      userDetail(data) {
        this.fromUsers = {
          avator: "",
          id: data.id,
          idCard: data.idCard,
          manageCapsuleInfoId: data.manageCapsuleInfoId.split(','),
          nickName: data.nickName,
          phone: data.phone,
          roleKey: data.roleKey == '管理员' ? 'manage' : (data.roleKey == '保洁员' ? 'clean' : 'repair'),
          sex: data.sex,
          userName: data.userName
        }
        this.userVisibles = true
      },
      setUserPass(id) {
        this.$prompt('请输入新密码', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          inputPattern: /^[0-9]*$/,
          inputErrorMessage: '密码格式不正确'
        }).then(({
          value
        }) => {
          setPass({
            id: id,
            newPassword: value
          }).then(res => {
            this.$message({
              type: 'success',
              message: '设置成功！'
            })
            this.getList()
          })
        })
      },
      handleDelete(id) {
        this.$confirm('此操作将永久删除该角色, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          deleteUser(id).then(res => {
            if (res.code == 200) {
              this.$message({
                type: 'success',
                message: '删除成功!'
              })
              this.getList()
            } else {
              this.$message({
                type: 'error',
                message: '删除失败'
              })
            }
          })
        })
      },
      handleClose() {
        this.userVisibles = false
      },
      add() {
        this.userVisibles = true
      },
      onSubmitsear() {
        if (this.tiemValue && this.tiemValue.length > 0) {
          this.dataFrom.createBeginTime = this.tiemValue[0]
          this.dataFrom.createEndTime = this.tiemValue[1]
        } else {
          this.dataFrom.createBeginTime = ''
          this.dataFrom.createEndTime = ''
        }
        this.getList()
      },
      resetQuery() {
        this.dataFrom = {
          "createBeginTime": "",
          "createEndTime": "",
          "pageNum": 1,
          "pageSize": 10,
          "phone": "",
          "roleKey": ""
        }
        this.getList()
      }
    }
  }
</script>

<style>

</style>
